import { ReactSVG } from "react-svg"

const modules:Record<string , {default:any}> = import.meta.glob('@/assets/svgs/*.svg', { eager: true })

const pool:Record<string , string> = {}

Object.keys(modules).forEach(key=>{
  const src = modules[key].default;
  const nameArr = key.split("/")
  const name = nameArr[nameArr.length-1];
  pool[name] = src
})

type SvgProps = {
  name:string,
  width?:number,
  height?:number,
  className?:string,
  onClick?:()=>void
}

export default function Svg ({name , width = 120, height = 30 , className = '' , onClick}:SvgProps){
  // console.log( , logo , "##");
  const w = `${width}px`
  const h = `${height}px`
  return (
    <ReactSVG 
      src={pool[name]} 
      className={`wapper ${className}` }
      onClick={onClick}
      style={{width:w,height:h}}
      wrapper="div" 
      beforeInjection={(svg)=>{
        svg.style.width = w ;
        svg.style.height = h; 
      }}
    />
  )
}
